<template>
  <div>
    <div
      class="info-item"
      v-for="(item, index) in notifiItemList"
      :key="index"
      @click="goNotifiDetail()"
    >
      <img :src="item.newsPic" alt="img" />
      <div class="info-acti">
        <h4
          style="font-size: 14px;overflow: hidden;text-overflow:ellipsis;white-space: nowrap; "
        >
          {{ item.newsTitle }}
        </h4>
        <p
          style="font-size: 12px;color: #999999;line-height: 24px;word-break: break-all;text-overflow: ellipsis;display: -webkit-box;
        -webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;"
        >
          {{ item.newsTitle }}
        </p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "notifiItem",
  props: {
    notifiItemList: [],
  },
  data() {
    return {};
  },
  methods: {
    goNotifiDetail() {},
  },
};
</script>

<style lang="scss" scoped>
.info-item {
  width: 560px;
  height: 78px;
  background: #ffffff;
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  img {
    width: 140px;
    height: 78px;
  }
  .info-acti {
    width: 392px;
    height: 78px;
    overflow: hidden;
    padding: 7px 14px 6px 13px;
    h4 {
      color: #666666;
    }
    h4:hover {
      color: #2590f4;
    }
  }
}
</style>
